<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
    <title>个人展示</title>
    <link rel="stylesheet" href="./css/base.css"/>
    <link rel="stylesheet" href="./css/animate.min.css"/>
    <link rel="stylesheet" href="./css/meteor.css"/>
    <link rel="stylesheet" href="./css/resume.css"/>
    <script src='js/jquery-1.12.4.js'></script>
    <script src='js/meteor.js'></script>
    <script src='js/resume.js'></script>

    <script> </script>

</head>
<body>
<!--整体布局盒子-->
<div class="whole">
    <img src="images/back-01.jpg" class='back-01'>
    <!--射灯-->
    <div class="spotlight-l">
        <img src="images/spotlight-l.png" >
    </div>
    <div class="spotlight-r">
        <img src="images/spotlight-r.png" >
    </div>
    <!--旋转风车-->
    <img src="images/arovane-02.png" class='windmill'>
    <img src="images/arovane-01.png" class='windmill4' >
    <!--跳动下键-->
    <!--<div class="bounce">-->
        <!--<img src="images/pgdn.png" >-->
    <!--</div>-->
    <!--跳动下键-->

<!--1-4屏-->
    <div class="wrapper">
        <ul class="tab">
		<li class="tab-item active">
                <img src="images/ico1.png" >
            </li>
            <li class="tab-item">
                <img src="images/ico04.png" >
            </li>
            <li class="tab-item">
                <img src="images/ico03.png" >
            </li>
            <li class="tab-item">
                <img src="images/ico05.png" >
            </li>
            <li class="tab-item tab-item1">
                    <img id="music" src="images/ico2.png" >
                <audio id="beep-one" autoplay="autoplay" style='display:none' src="video/亲爱的.mp3" controls="controls" >
                </audio>
				</li>
            <script>
                var music = document.getElementById('music');
                var aud = document.getElementById('beep-one');
                var off = false;
                music.onclick = function () {
                    if( off == false ){
                        aud.play();
                        off = true;
  return;
                    }
                    if( off == true ){
                        aud.pause();
                        off = false;
                        return;
                    }

                };

            </script>
            <img src="images/back-02.png" class='back-02'>
        </ul>
        <div class="products">
            <!--第一屏-->
            <div class="main selected " >
                <!--旋转原形-->
                <div class="rotational">
                    <img src="images/secto.png" >
                </div>
                <!--大风车-->
                <div class="Pinwheel">
                    <img src="images/Pinwheel.png" >
                </div>
                <!--一对-->
                <div class="twain">
                    <img src="images/side.png" >
                </div>
                <!--头像-->
                <div class="portrait">
                    <img src="images/headt.png" >
					</div>
                <!--头像-->
                <!--瞄准器-->
                <div class="gunsight">
                    <img src="images/aim.png" >
                </div>
                <!--瞄准器-->
                <!--个人资料信息-->
                <div class="inforr1">
                    <img src="images/lf_lin1.png">
                </div>
                <div class="inforr2">
                    <img src="images/lf_lin2.png">
                </div>
                <div class="inforr3">
                    <img src="images/lr_lin1.png">
                </div>
                <div class="inforr">
                    <img src="images/namey.png">
                </div>
                <div class="line">
                    <img src="images/line.png" >
                </div>
                <!--个人资料信息-->
                <!--年份-->
                <div class="year">
                    <img src="images/year.png">
                </div>
                <!--年份-->
                <!--名句-->
                <div class="pic6">
                    <img src="images/pic6.png" >
                </div>
                <div class="pic7">
                    <img src="images/pic7.png" >
                </div>
                <!--名句-->
            </div>

            <!--第二屏-->
            <div class="main ">
                <div class="bounceIn animated  skill ">
                    <img src="images/yhao.png" >
                </div>
                <div class="rollIn animated  box1">
                    <img src="images/pic12.png" >
                    <div class="c3">
                        <img src="images/pic13.png">
                    </div>
                    <div class="surgingline">
                        <img src="images/pic14.png">
                        <img src="images/pic14.png">
                    </div>
                    <!--第一个风轮-->
                    <div class="wheel">
                        <div class="pic-4">
                            <img src="images/pic9.png">
                        </div>
                        <div class="pic-1 pic-00"><img src="images/pic8.png"></div>
                        <div class="pic-2 pic-00"><img src="images/pic8.png"></div>
                        <div class="pic-3 pic-00"><img src="images/pic8.png"></div>
						</div>
						</div>
						<div class="swing animated box2">
                    <div class=" htm5">
                        <img src="images/pic15.png" >
                    </div>
                    <img src="images/pic16.png" >
					<video width="320" height="240" controls="controls" preload="auto">
                        <source src="video/lxx.ogg" type="video/ogg">
                        <source src="video/lxx.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
					<!--第二个风轮-->
                    <div class="wheel wheell">
                        <div class="pic-4 pic-04">
						</div>
                        <div class="pic-1 pic-00"><img src="images/pic8.png"></div>
                        <div class="pic-2 pic-00"><img src="images/pic8.png"></div>
                        <div class="pic-3 pic-00"><img src="images/pic8.png"></div>
						</div>
						</div>

            </div>
            <!--第三屏-->
            <div class="main ">
                <div class="flip animated web-skl">
                    <img src="images/pic17.png" >
                </div>
                <!--技能大盒子-->
				<div class="rollIn animated plug">
                        <img src="images/pic18.png" >
                        <!--jqeury-->
                        <div class="bounceInUp animated pic19">
                            <img src="images/pic19.fw.png" >
                        </div>
                        <div class="bounceInDown animated pic20">
                            <img src="images/pic20.fw.png" >
                        </div>
                        <div class="jello animated pic21">
                            <img src="images/pic21.fw.png" >
                        </div>
                        <!--javascript-->
                        <div class="bounceInUp animated pic22">
                            <img src="images/pic22.fw.png" >
                        </div>
                        <div class="bounceInDown animated pic23">
                            <img src="images/pic23.fw.png" >
                        </div>
                        <div class="jello animated pic24">
                            <img src="images/pic24.fw.png" >
                        </div>
                        <!--html+css-->
                        <div class="bounceInUp animated pic25">
                            <img src="images/pic25.fw.png" >
                        </div>
                        <div class="bounceInDown animated pic26">
                            <img src="images/pic26.fw.png" >
                        </div>
                        <div class="jello animated pic27">
                            <img src="images/pic27.fw.png" >
                        </div>
                        <!--bootstrap-->
                        <div class="bounceInUp animated pic28">
                            <img src="images/pic28.fw.png" >
                        </div>
                        <div class="bounceInDown animated pic29">
                            <img src="images/pic29.fw.png" >
                        </div>
                        <div class="jello animated pic30">
                            <img src="images/pic30.fw.png" >
                        </div>
                    </div>
                <!--ajax-->
                <div class="bounceInUp animated pic31">
                    <img src="images/pic31.fw.png" >
                </div>
                <div class="bounceInDown animated pic32">
                    <img src="images/pic32.fw.png" >
                </div>
                <div class="jello animated pic36">
                    <img src="images/pic36.fw.png" >
                </div>
                <!--angularjs-->
                <div class="bounceInUp animated pic33">
                    <img src="images/pic33.fw.png" >
                </div>
                <div class="bounceInDown animated pic34">
                    <img src="images/pic34.fw.png" >
                </div>
                <div class="jello animated pic35">
                    <img src="images/pic35.fw.png" >
                </div>
            </div>
            <!--第四屏-->
            <div class="main ">
                <div class="div"></div>
                <div class="wobble animated tell">
                    <img src="images/pic37.fw.png" >
                </div>
                <div class="bounceInUp animated benpa">
                    <img src="images/pic38.fw.png" >
                </div>
                <div class="lightSpeedIn animated yhao">
                    <img src="images/pic39.fw.png" >
                </div>
                <div class="rotateInUpRight animated distant">
                    <img src="images/pic40.fw.png" >
                </div>
                <div class="shake animated Twon">
                    <img src="images/pic41.fw.png" >
                </div>
                <div class="thanks">
                    <img src="images/pic42.fw.png" >
                </div>
                <div class="arovanen">
                    <img src="images/pic44.fw.png" >
                </div>
                <div class="arovanen arovanen2">
                    <img src="images/pic44.fw.png" >
                </div>
                <div class="arovanen arovanen3">
                    <img src="images/pic44.fw.png" >
                </div>
                <div class="arovanen arovanen4">
                    <img src="images/pic44.fw.png" >
                </div>
				</div>
        </div>
    </div>
	</div>
	</div>
	
	</body>
</html>